<template>
  <div class="mine">

  <div></div>
    <div class="mine-header">
		<mt-header title="我的" class="me">
		  <img src="../assets/new.png" alt="" slot="right">
		</mt-header>
		<div class="me-header">
			<img src="../assets/tou.jpeg" alt="" class="tou">
			<div class="xin">
				<h2>茶朽</h2>
				<p><img src="../assets/approve.png" alt="">未认证</p>
			</div>
			<i class="el-icon-arrow-right"></i>
		</div>
    </div>
    <div class="mine-nav">
	    <el-row>
		  	<el-col :span="12">
			  	<router-link to="/myIndent" class="color">
				  	<div class="grid-content bg-purple" @click="fanh()">
					  	<div class="aImg">
							<img src="../assets/indexs.png" alt="" style="width: 80%; margin-top:10px;">
						</div>
						<p>订单</p>
				  	</div>
				</router-link>
			</el-col>
			<el-col :span="12">
			  	<div class="grid-content bg-purple-light">
			  	<div class="aImg">
					<img src="../assets/coupon.png" alt="">
			  	</div>
					<p>优惠券</p>
			  	</div>
			</el-col>
		</el-row>
	</div>
	<div class="mine-main">
		<div class="min1">	
			<mt-cell title="我的收藏" is-link class="mt">
			  <img slot="icon" src="../assets/collect.png" width="24" height="24">
			</mt-cell>
			<mt-cell title="我的关注" is-link class="mt">
			  <img slot="icon" src="../assets/attention.png" width="24" height="24">
			</mt-cell>
			<mt-cell title="常用游客" is-link class="mt">
			  <img slot="icon" src="../assets/visitor.png" width="24" height="24">
			</mt-cell>
		</div>
		<div class="min1">
			<div @click="bo">
				<mt-cell title="客服" value="4006-406-111" class="mt">
				  <img slot="icon" src="../assets/service.png" width="24" height="24">
				</mt-cell>
			</div>
			<mt-cell title="设置" is-link class="mt">
			  <img slot="icon" src="../assets/set.png" width="24" height="24">
			</mt-cell>
			<mt-cell title="关于我们" is-link class="mt">
			  <img slot="icon" src="../assets/about.png" width="24" height="24">
			</mt-cell>
		</div>
		<p class="qie" @click="show">切换商家身份<img src="../assets/qie.png" alt=""></p>
		<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
	</div>
	<div class="login">
		<div class="center">
				<el-row class="choose">
				<el-col :span="2">&ensp;</el-col>
				<el-col :span="20">{{login}}</el-col>
				<el-col :span="2">&ensp;</el-col>
			</el-row>
			<ul class="account">
				<li>账号:<input type="username" v-model="username"></li>
				<li>密码:<input type="password" v-model="password"></li>
			</ul>
			<el-button type="primary" v-if="btnShow" @click="aaa('注册')" class="btn">注册</el-button>
			<el-button type="primary" v-if="!btnShow" @click="aaa('登录')" class="btn">登录</el-button>
			<el-button type="text" class="btn" @click="fn">点击{{regist}}</el-button>
			
		</div>
	</div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
  name: 'mine',
  data:function(){
  	return {
  		sheetVisible:false,
  		popupVisible:true,
  		username:'',
		password:'',
		btnShow:0,
		login:'登陆',
		regist:'注册',
  		actions:[
  			{
  				name:'我是房东'
  			},
  			{
  				name:'我是达人'
  			},
  			{
  				name:'家政服务'
  			}
  		]
  	}
  },
  methods:{
  	show:function(){
  		this.sheetVisible = true;
  	},
  	bo:function(){
  		MessageBox.confirm('4006-406-111','').then(action =>{
  			console.log(1)
  		});
  	},
  	fanh(){
  		localStorage.setItem("aa","1")
  	},
  	aaa(type){

		if(!this.username || !this.password){
			alert('请输入账号或密码')
			return
		}
		// console.log(1)
		if('注册' == type){
			console.log(type)
			$.get('regist',{username:this.username,password:this.password}).then(function(item){
				console.log(item)
			})
		}else if('登录' == type){
			console.log(type)
			$.getJSON('login',{username:this.username,password:this.password}).then(function(item){
				console.log(item)
			})
		}
	},
	fn(){
		if(!this.btnShow){
			this.btnShow = !this.btnShow;
			this.login = "注册";
			this.regist = "登录";
		}else{
			this.btnShow = !this.btnShow;
			this.login = "登录";
			this.regist = "注册";
		}

		// btnShow:0,
		// login:'登陆',
		// regist:'注册',
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.color{
	color: black;
	text-decoration: none;
}
body{
	.mine{
		width: 100%;
		background-color: #EFF2F7;
		.mine-header{
			width: 100%;
			height: 200px;
			background-color:pink;
			padding-top: 10px;
			box-sizing: border-box;
			color: white;
			.me{
				font-size: 20px;
				background: none;
			}
			.me-header{
				margin: 50px 0 0 10px;
				.tou{
					border-radius: 50%;
					float: left;
					margin-right: 20px;
				}
				.xin{
					float: left;
					h2{
						padding: 10px;
					}
					p{
						width: 50%;
						img{
							width: 10%;
							vertical-align: middle;
							margin-right: 5px;
						}
					}
				}
				i{
					float: right;
					line-height: 80px;
					font-size: 30px;
					margin-right: 10px;
				}
			}
			img{
				width: 20%;
			}
		}
		.mine-nav{
			width: 100%;
			height: 100px;
			text-align: center;
			background-color: white;
			.bg-purple{
				border-right: 1px solid #eff2f7;
				box-sizing: border-box;
			}
			.grid-content{
				padding-top: 20px;
				box-sizing: border-box;
				.aImg{
						width: 20%;
						height: 50px;
						margin: 0 auto;
					img{
						width: 100%;
					}
				}
				
			}
			
		}
		.mine-main{
			width: 100%;
			margin-bottom: 80px;
			.min1{
				margin:10px 0;
				.mt{
					border-bottom: 1px solid #eee;
				}
			}
			.qie{
				width: 100%;
				height: 48px;
				text-align: center;
				background: white;
				line-height: 48px;
				img{
					width: 5%;
					vertical-align: middle;
				} 
			}
		}
	}
}
	.login{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #f4f4f4;
		z-index: 99999;
		left: 0;
		top: 0;
		.center{
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				transform: translateY(-70%) ;
			.choose{
				padding:  1rem 0;
				text-align: center;
				font-size: 1.4rem;
				margin-bottom: 3rem;

			}
			.account{
				text-align: center;
				font-size: 1.2rem;
				margin-bottom: 5rem;
				li{
					margin-bottom: 0.8rem ;
					input{
						margin-left: 10%;
						border: 1px solid #ccc;
						padding: 0.5rem;
						font-size: 1.2rem;
						border-radius: 0.5rem;
					}
				}	
			}
			.btn{
				width: 90%;
				margin-left: 5%;
				margin-bottom: 1rem;
			}
		}
	}
</style>